import React from 'react'
import { Form, Input, Modal, Button, message, Select, Row, Col} from 'antd'
import PropTypes from 'prop-types'
import './business.less'
import API from "../../api/business/business";
import Uploader from './Uploader'
const FormItem = Form.Item
const Option = Select.Option

class IcsComponentsSupplierFilterForm extends React.Component {
    state = {
        showViewer: this.props.showViewer,
        optionsProvince:[],
        optionsCity:[],
        optionsArea:[],
        fileList: [],
        isCommit: false
    }
    componentDidMount () {
        this.getProvince()
    }
    componentWillReceiveProps (nextProps) {
        if ('rowInfo' in nextProps && nextProps.showViewer && !this.state.isCommit) {
            console.log(nextProps)
            this.setState({ rowInfo: nextProps.rowInfo})
            if (nextProps.rowInfo.card_province && nextProps.rowInfo.card_province !== '0') {
                this.selectProvince(nextProps.rowInfo.card_province, nextProps.rowInfo.card_city, nextProps.rowInfo.card_district)
            }
            if (nextProps.rowInfo.card_city && nextProps.rowInfo.card_city !== '0') {
                this.selectCity(nextProps.rowInfo.card_city, nextProps.rowInfo.card_district)
            }

            // 图片
            if (nextProps.rowInfo.shop_prof && nextProps.rowInfo.shop_prof.length) {
                let arr = []
                nextProps.rowInfo.shop_prof.forEach((v, k) => {
                    arr.push({
                        name: v.name,
                        url: v.url,
                        uid: k
                    })
                })
                this.setState({fileList: arr})
            }
        }
    }
    onCancel = () => {
        this.setState({isCommit: false})
        this.props.doViewer()
    }
    handleSearch = (e) => {
        e.preventDefault()
        this.setState({isCommit: true}, () => {
            this.props.form.validateFields((err, values) => {
                if (err) return
                // values.shop_prof = this.state.fileList
                if (this.state.fileList && this.state.fileList.length > 1) {
                    message.error('只能上传一张图片！')
                    return
                }
                if (this.state.fileList && this.state.fileList.length > 0) {
                    values.shop_prof = this.state.fileList.map(v => {
                        let obj = {
                            name: v.name,
                            url: v.url,
                            uid: v.uid
                        }
                        return obj
                    })
                }
                if (!this.state.city) {
                    message.error('请重新选择城市！')
                    return
                }
                if (!this.state.district) {
                    message.error('请重新选择区域！')
                    return
                }
                if (this.props.isEditing) {
                    values.shop_id = this.props.shop_id
                }
                console.log(values)
                if (this.props.isEditing) {
                    this.editData(values)
                } else {
                    this.addData(values)
                }
            });
        })

    }
    addData = (values) => {
        API.addShop(values).then(res => {
            if (res.error === 0) {
                message.success('添加成功！')
                this.props.doViewer()
                this.props.doSearch()
            } else {
                message.error(res.msg || '添加失败！')
            }
        })
    }
    onChangeFile = (file) => {
        this.setState({fileList: file})
    }
    editData = (values) => {
        API.editShop(values).then(res => {
            if (res.error === 0) {
                message.success('编辑成功！')
                this.props.doViewer()
                this.props.doSearch()
            } else {
                message.error(res.msg || '编辑失败！')
            }
        })
    }
    getRegionData = (query) => {
        return API.getRegionList(query).then(res => {
            let newOptions = res.data.listData.map(v => {
                let obj = {
                    value: v.region_id,
                    parent_id: v.parent_id,
                    label: v.region_name,
                    region_type: v.region_type,
                    isLeaf: false
                }
                return obj
            })
            return newOptions
        })
    }
    getProvince = () => {
        this.getRegionData({parent_id: 1}).then(res => {
            this.setState({optionsProvince: res})
        })
    }
    selectProvince = (val, defaultCity, defaultDistrict) => {
        this.setState({isCommit: true}, () => {
            this.getRegionData({parent_id: val}).then(res => {
                this.setState({optionsCity: res, province: val, city: defaultCity && typeof defaultCity !== "object" ? defaultCity : '', district: defaultDistrict ? defaultDistrict: ''})
            })
        })

    }
    selectCity = (val, defaultDistrict) => {
        this.setState({isCommit: true}, () => {
            this.getRegionData({parent_id: val}).then(res => {
                this.setState({optionsArea: res, city: val, district: defaultDistrict && typeof defaultDistrict !== "object" ? defaultDistrict: ''}, () => {
                    console.log(this.state.city)
                })
            })
        })

    }
    selectArea = (val) => {
        this.setState({district: val})
    }
    render () {
        const { getFieldDecorator } = this.props.form
        const formItemLayout = {
            labelCol: {
                xs: { span: 24 },
                sm: { span: 6 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 17 },
            },
        }
        const formItemLayout_r = {
            labelCol: {
                xs: { span: 24 },
                sm: { span: 6 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 23 },
            },
        }
        return this.props.showViewer && <Modal
            className="store-viewer"
            style={{width: 600}}
            visible={this.props.showViewer}
            title={this.props.isEditing ? "编辑商家" : "新建商家"}
            onCancel={this.onCancel}
        >
            <Form
                layout="inline"
                className="supplier-filter"
                onSubmit={this.handleSearch}>
                <FormItem
                    {...formItemLayout}
                    label="商家名称">
                    {getFieldDecorator('shop_name', {
                        rules: [{
                            required: true, message: '请填写商家名称！',
                        }],
                        initialValue: this.state.rowInfo? this.state.rowInfo.shop_name : ''
                    })(
                        <Input />
                    )}
                </FormItem>
                <FormItem
                    {...formItemLayout}
                    label="联系人">
                    {getFieldDecorator('contact', {
                        rules: [{
                            required: true, message: '请填写联系人！',
                        }],
                        initialValue: this.state.rowInfo? this.state.rowInfo.contact : ''
                    })(
                        <Input />
                    )}
                </FormItem>
                <FormItem
                    {...formItemLayout}
                    label="联系电话">
                    {getFieldDecorator('shop_tel', {
                        rules: [{
                            required: true, message: '请填写联系电话',
                        }],
                        initialValue: this.state.rowInfo? this.state.rowInfo.shop_tel : ''
                    })(
                        <Input />
                    )}
                </FormItem>
                <FormItem
                    {...formItemLayout}
                    label="行业">
                    {getFieldDecorator('business', {
                        rules: [{
                            required: true, message: '请选择行业！',
                        }],
                        initialValue: this.state.rowInfo? this.state.rowInfo.business: ''
                    })(
                        <Select allowClear placeholder="请选择" dropdownMatchSelectWidth={false}>
                            <Option value="服装销售">服装销售</Option>
                        </Select>
                    )}
                </FormItem>
                <FormItem
                    {...formItemLayout}
                    label="银行名字">
                    {getFieldDecorator('card_name', {
                        rules: [{
                            required: true, message: '请填写银行名字！',
                        }],
                        initialValue: this.state.rowInfo? this.state.rowInfo.card_name: ''
                    })(
                        <Input />
                    )}
                </FormItem>
                <FormItem
                    {...formItemLayout}
                    label="银行卡号">
                    {getFieldDecorator('card_no', {
                        rules: [{
                            required: true, message: '请填写银行卡号!',
                        }],
                        initialValue: this.state.rowInfo? this.state.rowInfo.card_no: ''
                    })(
                        <Input />
                    )}
                </FormItem>
                <Row>
                    <Col span={6} style={{color: '#333', textAlign: 'right'}} className="ant-form-item-required">银行所在区域：</Col>
                    <Col span={17}>
                        <FormItem
                            {...formItemLayout_r}
                            style={{width: '30%', marginRight: '2%'}}
                            label="">
                            {getFieldDecorator('card_province', {
                                rules: [{
                                    required: true, message: '选择省!',
                                }],
                                initialValue: this.state.rowInfo && this.state.rowInfo.card_province !== '0' ? this.state.rowInfo.card_province: ''
                            })(
                                <Select placeholder="请选择" onChange={this.selectProvince}>
                                    {this.state.optionsProvince.map(v =>  <Option key={v.value} value={v.value}>{v.label}</Option>)}
                                </Select>
                            )}
                        </FormItem>
                        <FormItem
                            {...formItemLayout_r}
                            style={{width: '30%', marginRight: '2%'}}
                            label="">
                            {getFieldDecorator('card_city', {
                                rules: [{
                                    required: true, message: '选择市!',
                                }],
                                initialValue: this.state.rowInfo && this.state.rowInfo.card_city !== '0' ? this.state.rowInfo.card_city: ''
                            })(
                                <Select placeholder="请选择" onChange={this.selectCity}>
                                    {this.state.optionsCity.map(v =>  <Option key={v.value} value={v.value}>{v.label}</Option>)}
                                </Select>
                            )}
                        </FormItem>
                        <FormItem
                            {...formItemLayout_r}
                            style={{width: '30%', marginRight: '2%'}}
                            label="">
                            {getFieldDecorator('card_district', {
                                rules: [{
                                    required: true, message: '选择区!',
                                }],
                                initialValue: this.state.rowInfo && this.state.rowInfo.card_district !== '0' ? this.state.rowInfo.card_district: ''
                            })(
                                <Select placeholder="请选择" onChange={this.selectArea}>
                                    {this.state.optionsArea.map(v =>  <Option key={v.value} value={v.value}>{v.label}</Option>)}
                                </Select>
                            )}
                        </FormItem>
                    </Col>

                </Row>
                <FormItem
                    {...formItemLayout}
                    label="分行名字">
                    {getFieldDecorator('card_address', {
                        rules: [{
                            required: true, message: '请填写分行名字！',
                        }],
                        initialValue: this.state.rowInfo? this.state.rowInfo.card_address: ''
                    })(
                        <Input />
                    )}
                </FormItem>
                <FormItem
                    {...formItemLayout}
                    label="持卡人">
                    {getFieldDecorator('card_owner', {
                        rules: [{
                            required: true, message: '请填写持卡人！',
                        }],
                        initialValue: this.state.rowInfo? this.state.rowInfo.card_owner: ''
                    })(
                        <Input />
                    )}
                </FormItem>
                <Row style={{height: 'auto'}}>
                    <Col span={6} style={{color: '#333', textAlign: 'right'}} className="ant-form-item-required">上传营业执照：</Col>
                    <Col span={17}>
                        <FormItem
                        >
                            {getFieldDecorator('shop_prof', {
                                rules: [{
                                    required: false
                                }],
                                getValueFromEvent: this.handleEvent,
                                initialValue: this.state.rowInfo? this.state.rowInfo.shop_prof: []
                            })(
                                <Uploader fileList={this.state.fileList} onChangeFile={this.onChangeFile}/>
                            )}
                        </FormItem>
                    </Col>
                </Row>

                <div className="btns">
                    <Button type="primary" style={{marginRight: 10}} onClick={this.onCancel}>取消</Button>
                    <Button type="primary" htmlType="submit">提交</Button>
                </div>
            </Form>
        </Modal>
    }
}

IcsComponentsSupplierFilterForm.propTypes = {
    getFieldDecorator: PropTypes.func,
    doSearch: PropTypes.func,
    showViewer: PropTypes.any,
    doViewer: PropTypes.func,
    rowInfo: PropTypes.object,
    isEditing: PropTypes.bool,
    shop_id: PropTypes.any,
    form: PropTypes.object
}

const IcsComponentsSupplierFilter = Form.create()(IcsComponentsSupplierFilterForm)

export default IcsComponentsSupplierFilter
